<template>
   <div class='container'>
    <div class="btn_wrapper">
      <div><span class="title">说明：目前支持学科和关键字条件筛选</span></div>
      <el-button type="success" class="addbtn" icon="el-icon-edit" @click="onclick">新增试题</el-button>
    </div>
    <el-form label-position="right" label-width="80px" :model="formData">
      <div class="el-row">
        <el-form-item label="学科" style="width:25%;">
            <el-select @change="onchange(formData.subjectID)" v-model="formData.subjectID" placeholder="请选择" >
    <el-option
      v-for="item in SubjectList"
      :key="item.id"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
        </el-form-item>
        <el-form-item label="二级目录"  style="width:24%">
            <el-select v-model="formData.catalogID" placeholder="请选择">
    <el-option
      v-for="item in directoryList"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
        </el-form-item>
        <el-form-item label="标签"  style="width:23%">
          <el-select v-model="formData.tags" placeholder="请选择">
             <el-option
      v-for="item in tagsList"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关键字"  style="width:23%">
            <el-input v-model="formData.keyword" placeholder="根据题干搜索"></el-input>
        </el-form-item>
      </div>
      <div class="el-row">
        <el-form-item label="试题类型"  style="width:25%">
           <el-select v-model="formData.questionType" placeholder="请选择">
    <el-option
      v-for="item in questionTypeList"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
        </el-form-item>
        <el-form-item label="难度"  style="width:24%">
          <el-select v-model="formData.difficulty" placeholder="请选择">
    <el-option
      v-for="item in difficultyList"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
        </el-form-item>
        <el-form-item label="方向"  style="width:23%">
          <el-select v-model="formData.direction" placeholder="请选择">
    <el-option
      v-for="item in directionList"
      :key="item"
      :label="item"
      :value="item">
    </el-option>
  </el-select>
        </el-form-item>
        <el-form-item label="录入人"  style="width:23%">
       <el-select v-model="formData.creatorID" placeholder="请选择">
    <el-option
      v-for="item in userInfo"
      :key="item.id"
      :label="item.username"
      :value="item.id">
    </el-option>
  </el-select>
        </el-form-item>
      </div>
      <div class="el-row">
        <el-form-item label="题目备注"  style="width:25%">
           <el-input v-model="formData.remarks" >

       </el-input>
        </el-form-item>
        <el-form-item label="企业简称"  style="width:24%">
          <el-input v-model="formData.shortName" >
      </el-input>
        </el-form-item>
        <el-form-item label="城市"  style="width:23%" class="towSelect">
           <el-select class="selectone" v-model="formData.provinces" placeholder="请选择" @change='getCity(formData.provinces)'  style="width: 48%;">
    <el-option
      v-for="item in provincesList"
      :key="item"
      :label="item"
      :value="item">
    </el-option>
  </el-select>
   <el-select  style="width: 48%;" class="selecttwo" v-model="formData.city" placeholder="请选择" >
    <el-option
      v-for="item in citylist"
      :key="item"
      :label="item"
      :value="item">
    </el-option>
  </el-select>
        </el-form-item>
        <el-form-item style="width: 23%; position: relative;">
          <div style="position: absolute; right: 0;">
            <el-button size="mini" @click="clearForm">清除</el-button>
         <el-button size="mini" type="primary" @click="search">搜索</el-button>
          </div>

        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
import { simple } from '../../api/hmmm/subjects'
import { simple as directory } from '../../api/hmmm/directorys'
import { simple as tags } from '../../api/hmmm/tags'
import { difficulty, questionType, direction } from '../../api/hmmm/constants'
import { simple as inputUser } from '../../api/base/users'
import { provinces, citys } from '../../api/hmmm/citys'

export default {
  props: {
    pages: Object
  },
  data () {
    return {
      // 学科列表
      SubjectList: [],
      // 目录列表
      directoryList: [],
      // 标签列表
      tagsList: [],
      questionTypeList: questionType,
      // 试题类型数组
      difficultyList: difficulty,
      directionList: direction,
      userInfo: [],
      provincesList: provinces(),
      citylist: [],
      formData: {

        //  学科选中的值
        subjectID: '',
        // 目录选中的值
        catalogID: '',
        // 标签选中的值
        tags: '',
        // 试题类型选中的值
        difficulty: '',
        questionType: '',
        direction: '', // 方向
        creatorID: '', // 录入人
        provinces: '', // 城市
        city: '', // 选中的市
        keyword: '', // 关键字
        remarks: '', // 题目备注
        shortName: ''// 企业简称
      }

    }
  },
  created () {
    // 获取学科列表
    this.getSubjectList()
    this.getUser()
  },
  watch: {
    pages: {
      deep: true,
      handler (newval) {
        this.pages = newval
      }

    }
  },
  methods: {

    async search () {
      this.$emit('table', { subjectID: this.formData.subjectID, keyword: this.formData.keyword })
    },
    // 清空表单
    clearForm () {
      this.formData = {}
    },
    // 获取地级市
    getCity (provinces) {
      this.citylist = citys(provinces)
    },
    // 获取录入人
    async getUser () {
      const { data } = await inputUser()
      this.userInfo = data
    },
    // 获取二级目录列表
    async onchange (id) {
      // 获取目录列表
      const { data } = await directory({
        subjectID: id
      })
      this.directoryList = data
      // 获取标签列表
      const res = await tags({
        subjectID: id
      })
      this.tagsList = res.data
    },
    // 获取学科列表
    async  getSubjectList () {
      const { data } = await simple()
      this.SubjectList = data
      // console.log(data)
    },
    // 点击新增跳转库如题库页面
    onclick () {
      this.$router.push('new')
    }
  }

}
</script>

<style scoped lang='scss'>
  ::v-deep.container {
      font-size: 12px;
    .btn_wrapper {
      margin-bottom: 15px;
      display: flex;
      justify-content: space-between;
      -webkit-box-pack: justify;
      .title {
       color: pink;
      }
      .addbtn {
        padding: 9px 15px;
        color: #fff;
        background-color: #67c23a;
        border-color: #67c23a;
      }
    }
    .el-form{
      .el-row {
        display: flex;
        justify-content: space-evenly;
        .towSelect {
          .el-form-item__content {
            display: flex;
            justify-content: space-between;
          }
        }
        .el-form-item--medium {
          margin-bottom: 18px;
        }
        .el-select {
          display: block;
        }
        .el-form-item__label {
          height: 32px;
          line-height: 32px;
        }
       .el-input--medium .el-input__inner{
          height: 32px;
          line-height: 32px;
        }
      }
    }
  }
</style>
